import {
  Modal,
  Pressable,
  StyleSheet,
  View,
  Text,
  GestureResponderEvent,
} from 'react-native'
import { flexCol } from '../../assets/style/common'
import { Shadow } from 'react-native-shadow-2'
import { useEffect } from 'react'
interface OwlModalProp {
  title: string
  visible: boolean
  autoCloseTime?: number
  onClose?: (e?: GestureResponderEvent) => void
}
export default function OwlModal(prop: OwlModalProp) {
  const { autoCloseTime = 1000 } = prop
  useEffect(() => {
    const time = setTimeout(() => {
      prop.onClose && prop.onClose()
    }, autoCloseTime)
    return () => {
      clearTimeout(time)
    }
  }, [prop.visible, prop.autoCloseTime])
  return (
    <Modal transparent animationType="fade" visible={prop.visible}>
      <Pressable onPress={prop.onClose} style={flexCol(style.modal)}>
        <Shadow startColor="#00000010" distance={4} offset={[0, 4]}>
          <View style={flexCol(style.cover)}>
            <Text style={style.title}>{prop.title}</Text>
          </View>
        </Shadow>
      </Pressable>
    </Modal>
  )
}

const style = StyleSheet.create({
  modal: {
    justifyContent: 'center',
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    backgroundColor: '#00000000',
  },
  cover: {
    backgroundColor: '#ffffff',
    borderRadius: 4,
    minWidth: 120,
    height: 38,
    paddingHorizontal: 12,
    justifyContent: 'center',
  },
  title: {
    color: '#333333',
    fontWeight: 'bold',
  },
})
